<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/homepage.css">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
    <div class="top">
        <h3>首页</h3>
    </div>
    <!-- 左侧内容 -->
    <div class="homeLeft">
        <!-- 快捷方式布局 -->
        <div class="shortcut">
            <p>快捷方式</p>
            <table>
                <tr>
                    <td>
                        <span class="fa fa-home"></span>
                        <p>主页一</p>
                    </td>
                    <td>
                        <span class="fa fa-home"></span>
                        <p>主页一</p>
                    </td>
                    <td>
                        <span class="fa fa-home"></span>
                        <p>主页一</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="fa fa-clock-o"></span>
                        <p>主页一</p>
                    </td>
                    <td>
                        <span class="fa fa-mortar-board (alias)"></span>
                        <p>主页一</p>
                    </td>
                    <td>
                        <span class="fa fa-cog"></span>
                        <p>主页一</p>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 待办事项布局 -->
        <div class="backlog">
            <p>待办事项</p>
            <table>
                <tr>
                    <td>
                        <p>待跟进学员</p>
                        <span id="firstNum">66</span>
                    </td>
                    <td>
                        <p>待跟进院校</p>
                        <span id="secNum">166</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>待审核</p>
                        <span id="thrNum">666</span>
                    </td>
                    <td>
                        <p>待缴费</p>
                        <span id="fourNum">6666</span>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 数据概览布局 -->
        <div class="data_overview">
            <div class="do_top">
                <p>数据概览
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </p>
            </div>
            <strong>年度月份报名量</strong>
            <div id="opation"></div>
        </div>
    </div>
    <!-- 右侧布局 -->
    <div class="rightHome">
        <!-- 最近缴费 -->
        <div class="recently_pay">
            <p>最近缴费</p>
            <table>
                <tr>
                    <th></th>
                    <th>姓名</th>
                    <th>毕业院校</th>
                    <th>电话</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>王小虎</td>
                    <td>清华大学</td>
                    <td>16816899168</td>
                </tr>
            </table>
        </div>
        <!-- 最新动态 -->
        <div class="new_condition">
            <div class="nc_top">
                <p>最新动态</p>
            </div>
            <div class="content">
                <p>一直以来, 量子矩阵OA就是整个OA界最神秘, 最强大的OA产品. 强大到什么程度呢?开发者都说不上来...^_^O(∩_∩)O哈哈~</p>
                <p>喜报: 量子矩阵获得教育部高等教育司2019年度首批产学合作协同育人项目单位</p>
                <p>喜报: 量子矩阵获得教育部高等教育司2019年度首批产学合作协同育人项目单位</p>
                <p>喜报: 量子矩阵获得教育部高等教育司2019年度首批产学合作协同育人项目单位</p>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/ipUrl.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.common.js"></script>
<script>
optionA = {
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月']
    },
    yAxis: {
        type: 'value',
        max: 60,
        minInterval : 1,
        boundaryGap : [ 0, 0.1 ]
    },
    series: [{
        data: [12, 20, 15, 60, 40, 40, 13, 20],
        type: 'bar'
    }]
};
var myChart = echarts.init(document.getElementById('opation'));
myChart.setOption(optionA);
$(".do_top li:eq(0)").on("click", function() {
    myChart.setOption(optionA);
    $(".data_overview strong").html('年度月份报名量');
    $(this).css({
        backgroundColor: '#999'
    }).siblings().css({
        backgroundColor: '#e2e2e2'
    });
});
$(".do_top li:eq(1)").on("click", function() {
optionB = {
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月']
    },
    yAxis: {
        type: 'value',
        max: 60,
        minInterval : 1,
        boundaryGap : [ 0, 0.1 ]
    },
    series: [{
        data: [12, 20, 15, 60, 40, 40, 13, 20],
        type: 'line'
    }]
};
    myChart.setOption(optionB);
    $(".data_overview strong").html('年度月份资讯量');
    $(this).css({
        backgroundColor: '#999'
    }).siblings().css({
        backgroundColor: '#e2e2e2'
    });
});
$(".do_top li:eq(2)").on("click", function() {
    optionC = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月']
        },
        yAxis: {
            type: 'value',
            max: 60,
            minInterval : 1,
            boundaryGap : [ 0, 0.1 ]
        },
        series: [{
            data: [3, 25, 15, 10, 30, 6, 54, 36],
            type: 'bar'
        }]
    };
    myChart.setOption(optionC);
    $(".data_overview strong").html('年度月份退费量');
    $(this).css({
        backgroundColor: '#999'
    }).siblings().css({
        backgroundColor: '#e2e2e2'
    });
});
// ajax接口
$(function() {
    $.ajax({
        url: homepageURL+':9999/oaSystem/home',
        type:'post',
        data:{
            moduleId:'1'
        },
        dataType:'json',
        success:function(data){
            // console.log(data);
            $("#firstNum").html(data.result);
        },
        error:function(xhr,error){
            console.error(error);
        }
    });
});
$(function() {
    $.ajax({
        url: homepageURL+':9999/oaSystem/home',
        type:'post',
        data:{
            moduleId:'2'
        },
        dataType:'json',
        success:function(data){
            // console.log(data);
            $("#secNum").html(data.result);
        },
        error:function(xhr,error){
            console.error(error);
        }
    });
});
</script>
</html>